<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>数据监测案例</title>
</head>
<!-- vue会监测data种所有层次的数据，
通过setter实现监视，且要在new Vue时就传入要监测的数据。Vue.set/vm.$set(target,propertyName/index,value)
监测数组中的数据,调用原生对应的方法对数组进行更新 push pop unshift shift splice sort reverse
Vus.set() 和 vm.$set()不能给vm或者vm的根数据对象 添加属性-->
<body>
    <div id="root">
   <h1>学生信息</h1>
   <button  @click="student.age++">年龄+1</button><br>
 <button @click="addSex">添加性别属性,默认值男</button><br>
<button @click="addFriend">在列表首位添加一个朋友</button><br>
<button @click="updateFriendName">修改第一个朋友的名字为:张三</button><br>
<button @click="addHobby">添加一个爱好</button><br>
<button @click="addfirstHobby">修改第一个爱好为:开车</button> 
<button @click="addprop">在data中添加一个属性</button>
    <!-- <h3>{{a}}</h3> -->
   <h3>姓名:{{student.name}}</h3>
   <h3>年龄:{{student.age}}</h3>
   <h3>爱好:{{student.sex}}</h3>
   <ul>
    <li v-for="(h,index) of student.hobby" :key="index">{{h}}</li>
   </ul>

   <h3>朋友们:</h3>
   <ul>
    <li v-for="(f,index) in student.friends" :key="index">
        {{f.name}}--{{f.age}}
    </li>
   </ul>
    </div>
    <script>
        var vm =new Vue({
        el: '#root',
        data: {
            student:{
            name:'ltk',
            age:18,
            hobby:['抽烟','喝酒','烫头'],
            friends:[
             {name:'jerry',age:18},
             {name:'tony',age:20},
            ]
            }
        },
        methods:{
           addSex(){
            this.$set(this.student,'sex','男')
           },
           addFriend(){
           this.student.friends.unshift({"name":'李彤康','age':19})
           },
           updateFriendName(){
            this.student.friends[0].name="张三";
            // this.$set(this.student,this.student.friends[0], {name:'张三',age:18})
           },
           addHobby(){
            this.student.hobby.push("篮球")
           },
           addfirstHobby(){
           // this.student.hobby.splice(0,1,'开车');
            this.$set(this.student.hobby,0,'开车')
           },
        //    addprop(){
        //     this.$set(this._data,'a','你好')
        //    }

        }
        }
        )
    </script>
</body>
</html>